<!-- 个人中心 -->
<template>
 <view style="margin-top: 20rpx;">
  <view class="box"  v-for="(item, index) in list" :key="item.id" style="margin-top: 20rpx;">
      <view class="title">{{item.title}}</view>
      <view class="content">{{item.content}}</view>
       <view class="time">{{item.createtime}}</view>
  </view>
    
 </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
	data() {
		return {
			list:[],
			page: 1
		};
	},
	onLoad() {
		this.init()
	},
	onReachBottom() {
		console.log('已触底');
		this.page++
		this.init()
	},
    methods: {
       init(){
		   this.$https('my.msgList',{
			   page: this.page
		   }).then(res=>{
			   let dataList = res.data.data
			   this.list = [...this.list, ...dataList]
		   })
	   }
    },
    }
</script>

<style lang="scss" scoped>
  
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 
}
.personal-wrap {
  padding-bottom: 100rpx;
}
  .br{
      border: 1px solid  #F3F3F3;
      margin-left: 24rpx;
      margin-right: 24rpx;
  }

 
.box{
    width: 690rpx;
    height: 188rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin-left: 30rpx;
    margin-right: 30rpx;
	position: relative;
}
.title{
    width: 640rpx;
    height: 32rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 52rpx;
     margin-left: 22rpx;
     padding-top: 20rpx;
}
.content{
    width: 640rpx;
    height: 52rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 52rpx;
    margin-left: 22rpx;
    padding-top: 40rpx;
}
.time{
    // width: 274rpx;
    // height: 60rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 76rpx;
    position: absolute;
    right: 20rpx;
	bottom: 0;
}
</style>
